{% extends "base.html" %}

{% block content %}
<script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">


function encryptData() {
    var challenge;
    var public_key;
    $.ajax({
        url: '/do_challenge',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ param1: 10, param2: 20 }),  // 以JSON格式发送参数
        success: function(data) {
            console.log('从服务器接收到的结果：', data.challenge);
            console.log('从服务器接收到的结果：', data.public_key);
            challenge = data.challenge;
            public_key = data.public_key;
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;
            // challenge = 3123
            // public_key = "-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCseJicE843uA5R8vsXTWuC6kql9e98rr3cBumr/9rB8osEe1bCg9twShP+Tg7h6hP/rFP9UCDOvFmmUlbMbwcI71retVpXn/lbzyenyqldzPe24557XDctuN2+gxdDbvEuaARu1ilP09OHnH6jv8vEDo2/xq3F/9AcP8vaAmq59wIDAQAB-----END PUBLIC KEY-----"
            fake_public_key = "-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCf5UtATxMFbsnC1uRPe0sZj9yA5sQp+oY/wfgiI1phvrv6qYRCU6j7FpWWMl3Xn5jNpz0O4N7SxAV2OvNzdwvvKghwtnVBTa5YZM8giItYK2ZRHu3qosZ3DjqvToqTltx4gHPaf6jw0kIBaHYKpWrF8/oe2q6Janz0eYbm941VVQIDAQAB-----END PUBLIC KEY-----"
            server_id = md5(public_key)
            var token = `${email}|${password}|${challenge}|${server_id}`;
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(public_key);
            token = encrypt.encrypt(token);
            document.getElementById("token").value = token;
            console.log(token)
            // 提交表单
            document.getElementById("loginForm").submit();
                    // 对接收到的结果进行处理
                },
                error: function() {
                    // 处理请求出错的情况
                }
    });
}
</script>

<div class="column is-4 is-offset-4">
    <h3 class="title">Login</h3>
    <div class="box">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                    {{ messages[0] }}
                </div>
            {% endif %}
        {% endwith %}

        <input class="input is-large" type="email" name="email" id="email" placeholder="Email" autofocus="">
        <input class="input is-large" type="password" name="password" id="password" placeholder="Password">

        <form method="POST" action="/login" id="loginForm">
            <input type="hidden" name="token" id="token">
            <!-- 其他表单字段 -->
    
            <button class="button is-block is-info is-large is-fullwidth" onclick="encryptData()">Sign Up</button>
            </form>
    </div>
</div>
{% endblock %}